<template>
  <div>
    <!-- 图片 -->
    <template v-if="isImage">
      <img :src="firstValue" alt="图片" class="w-10 h-10" />
    </template>

    <!-- 文件 -->
    <template v-else-if="isFile">
      <a :href="firstValue" target="_blank" style="color: #409eff"> 查看文件 </a>
    </template>

    <!-- 文本 -->
    <template v-else>
      <span>{{ firstValue }}</span>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  value: string | string[]
}>()

// 如果是数组，取第一个值，否则直接用
const firstValue = computed(() => (Array.isArray(props.value) ? props.value[0] : props.value))

// 判断是否是图片
const isImage = computed(() => {
  if (!firstValue.value) return false
  return /\.(png|jpe?g|gif|webp|svg)$/i.test(firstValue.value)
})

// 判断是否是文件（非图片的情况）
const isFile = computed(() => {
  if (!firstValue.value) return false
  // 有 http/https 或 / 开头，且不是图片
  return /^https?:\/\//.test(firstValue.value) && !isImage.value
})
</script>
